<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common :: common_head('科目四图片练习')"></head>
<head>
    <link rel="stylesheet" th:href="@{/css/front/common-sequence.css}">
</head>
<body>
    <!-- 引入公共的导航部分 -->
    <header th:include="common/common :: common_header('','科目四图片练习')"></header>
    <!-- 内容的主体部分 -->
    <article id="change-content">
        <div class="layui-container">
            <div class="layui-row">
                <div class="layui-col-md10 layui-col-md-offset1">
                    <!-- 题目和选项信息 -->
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <span style="font-weight: bolder">{{questionType == 1 ? '单项选择' : (questionType == 2 ? '判断题' : '多项选择')}}</span>
                            <span>第 {{current}} 题 / 共 {{total}} 题</span>
                            <span>问题：{{questionTopic}}</span>
                        </div>
                        <!-- 选项部分的内容 -->
                        <div class="layui-card-body title-information">
                            <div class="question-wrap">
                                <div class="option-wrap" style="font-size: 14px;">
                                    <div class="input-radio" v-if="questionA"><input name="answer" v-model="answer" :type="type" value="A">&nbsp;&nbsp;<span>{{questionA}}</span></div>
                                    <div class="input-radio" v-if="questionB"><input name="answer" v-model="answer" :type="type" value="B">&nbsp;&nbsp;<span>{{questionB}}</span></div>
                                    <div class="input-radio" v-if="questionC"><input name="answer" v-model="answer" :type="type" value="C">&nbsp;&nbsp;<span>{{questionC}}</span></div>
                                    <div class="input-radio" v-if="questionD"><input name="answer" v-model="answer" :type="type" value="D">&nbsp;&nbsp;<span>{{questionD}}</span></div>
                                    <div class="input-radio" v-if="questionE"><input name="answer" v-model="answer" :type="type" value="E">&nbsp;&nbsp;<span>{{questionE}}</span></div>
                                    <div class="input-radio" v-if="questionF"><input name="answer" v-model="answer" :type="type" value="F">&nbsp;&nbsp;<span>{{questionF}}</span></div>
                                    <div class="input-radio" v-if="questionG"><input name="answer" v-model="answer" :type="type" value="G">&nbsp;&nbsp;<span>{{questionG}}</span></div>
                                </div>
                                <br><br>
                                <div class="option-button">
                                    <button type="button" @click="getNextQuestion(prePage,pre)" class="layui-btn">上一题</button>
                                    <button type="button" @click="getNextQuestion(nextPage,next)" class="layui-btn">下一题</button>
                                    <button type="button" @click="checkAnswer(answer,current)" v-if="questionType === 3" class="layui-btn">提交答案</button>
                                    <button type="button" class="layui-btn" @click="seeQuestionAnswer">查看本题答案</button>
                                    <button type="button" class="layui-btn" @click="seeComment">查看评论</button>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="question-image"><img :src="questionImage" alt=""></div>
                                <div class="question-image-button" v-if="questionImage"><button type="button" class="layui-btn layui-btn-primary" @click="seeBigImage">点击查看大图</button></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md10 layui-col-md-offset1">
                    <!-- 回答结果的提示信息 -->
                    <div class="layui-card">
                        <div class="layui-card-body result-information">
                            <hr>
                            <div class="layui-btn-container result-button">
                                <button type="button" class="layui-btn layui-btn-primary result-button-item" @click="getNextQuestion(index+1,appoint)" v-for="(id,index) in questionIds">{{index+1}}</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md10 layui-col-md-offset1"   >

                    <div class="layui-card" >
                        <div class="layui-card-body result-information">
                            <hr>
                            <table class="layui-hide" id="discuss-table" lay-filter="discuss-table"></table>
                        </div>
                    </div>

                </div>
                <div class="layui-col-md10 layui-col-md-offset1">

                    <div class="layui-card">
                        <div class="layui-card-body result-information">
                            <hr>
                            <form class="layui-form" action="">
                                <div class="layui-form-item layui-form-text ">
                                    <label class="layui-form-label">评论</label>
                                    <div class="layui-input-block">
                                        <textarea type="textarea" name="comment" placeholder="请发表您对本题的看法" autocomplete="off" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn "  lay-submit lay-filter="commit">发表评论</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        </div>
    </article>
    <hr>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>
    <!-- 公共的底部部分 -->
    <div th:replace="~{/common/common :: footer-common}"></div>
</body>
</html>
<script>
    const app = new Vue({
        el: '#change-content',
        data: {
            total: 0, //总问题数目
            current: 0, //当前问题的数标
            next: 'next', //下一题
            pre: 'pre', //上一题
            appoint: 'appoint', //指定条件
            type: 'radio', //默认单选框
            questionTopic: '',//当前问题的题目
            questionId: '',//当前题目的ID
            questionA: '',//存储选项A的内容
            questionB: '',//存储选项B的内容
            questionC: '',//存储选项C的内容
            questionD: '',//存储选项D的内容
            questionE: '',//存储选项E的内容
            questionF: '',//存储选项F的内容
            questionG: '',//存储选项G的内容
            questionExplain: '',//当前问题的解释
            questionType: '',//当前问题的类型
            answer: [],//用户选择的答案
            questionAnswer: '',//题目的正确答案
            questionImage: '',//题目的照片
            nextPage: 1,//下一题
            prePage: 1,//上一题
            questionIds:[], //用来存储题目的ID
        },
        methods: {
            //查看问题的大图片
            seeBigImage: function (){
                layui.use('layer', function(){
                    const layer = layui.layer;
                    layer.open({
                        type: 1,
                        area: '1000px',
                        moveOut: true,
                        shadeClose: true,
                        content: `<img src="${app.questionImage}" width="920" style="margin: 40px">`,
                    });
                });
            },
            //查看本题的答案
            seeQuestionAnswer: function (){
                layui.use('layer',function (){
                    const layer = layui.layer;
                    layer.open({
                        type: 1,
                        area: ['500px', '300px'],
                        title: false,
                        closeBtn: false,
                        shadeClose: true,
                        content: `<div class="layui-card">
                                      <div class="layui-card-header">本题问题解析：</div>
                                      <div class="layui-card-body">
                                        ${app.questionExplain}
                                      </div>
                                  </div>`,
                    })
                })
            },
            seeComment: function (){
                layui.use(['element', 'table'], function () {

                    let table = layui.table;
                    console.log(table);
                    let form = layui.form;
                    let $ = layui.$;
                    let layer = layui.layer;
                    table.render({
                        elem: '#discuss-table'
                        , url: '/discuss/seeComment'
                        , title: '评论'
                        , cols: [
                            [
                                {title: '序号', type: "numbers", unresize: false, width: 80}
                                , {field: 'name', title: '评论人', width: 135}
                                , {field: 'comment', title: '评论',width: 545}
                                , {field: 'created', title: '日期',}
                                , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
                            ]
                        ]
                        , id: 'discussTable'
                        , limits: [2, 4, 6, 8, 10]
                        , page: true
                    });

                    //监听行工具事件
                    table.on('tool(discuss-table)', function (obj) {
                        let data = obj.data;

                        //删除指定行数据
                        if (obj.event == 'delete') {
                            console.log(obj)
                            $.ajax({
                                url: '/discuss/deleteDiscuss',
                                data: {
                                    id:data.id,
                                    name:data.name
                                },
                                dataType: 'JSON',
                                success: function (res) {
                                    if (res == 1) {
                                        layer.msg("删除成功");
                                    }
                                    if (res == 0) {
                                        layer.msg("只能删除本人评论的内容");
                                    } if (res == 2) {
                                        layer.open({
                                            type: 0,
                                            area: '300px',
                                            moveOut: false,
                                            closeBtn: false,
                                            shade: 0.8,
                                            btn: ['去登陆页面', '留在当前页面'],
                                            btnAlign: 'c',
                                            content: `<div style="width: 100%;text-align: center">
                                        <h2>您当前未登录！</h2>
                                      </div>`,
                                            yes: function (){
                                                window.location.href = "/page/learnerLogin";
                                            }
                                        })
                                    }
                                    //执行重载
                                    table.reload('discussTable', {
                                        page: {
                                            curr: $(".layui-laypage-skip .layui-input").val() //重新当前页重载;
                                        }
                                    });
                                }
                            }, JSON)
                        }
                    });
                });
            },

            //获取下一个问题
            getNextQuestion: function (index,flag){
                let _this = this;
                //清除input的选中状态
                let radios = document.getElementsByName("answer");
                for (let i =0;i<radios.length;i++){
                    radios[i].checked=false;
                }
                //判断是不是最后一题
                if (_this.current === _this.total && _this.total !== 0 && flag === 'next'){
                    alert("已经是最后一题");
                }else if(_this.current === 1 && flag === 'pre'){
                    alert("已经是第一题");
                }else {
                    _this.$http.get('/question/getNextQuestionBySequence/4/'+index+'/image').then(function (page){
                        let page_json = JSON.parse(page.body);
                        _this.questionId = page_json.data[0].questionId;
                        _this.questionTopic = page_json.data[0].questionTopic;
                        _this.questionA = page_json.data[0].questionA;
                        _this.questionB = page_json.data[0].questionB;
                        _this.questionC = page_json.data[0].questionC;
                        _this.questionD = page_json.data[0].questionD;
                        _this.questionE = page_json.data[0].questionE;
                        _this.questionF = page_json.data[0].questionF;
                        _this.questionG = page_json.data[0].questionG;
                        _this.questionAnswer = page_json.data[0].questionAnswer;
                        _this.questionExplain = page_json.data[0].questionExplain;
                        _this.questionType = page_json.data[0].questionType;
                        _this.questionImage = page_json.data[0].questionImage;
                        _this.current = page_json.current;
                        _this.total = page_json.size;
                        _this.nextPage = _this.current + 1;
                        _this.prePage = _this.current - 1;
                        if (_this.questionType === 3){
                            _this.type = 'checkbox';
                        }else{
                            _this.type = 'radio';
                        }
                    },function (){
                        alert("请求失败");
                    })
                }
            },
            //获取全部问题的ID
            getQuestionId: function (){
                let _this = this;
                _this.$http.get('/question/getAllQuestionIdsBySequence/4/image').then(function (data){
                    let list = JSON.parse(data.body);
                    for (let i = 0; i < list.length; i++){
                        _this.questionIds[i] = list[i];
                    }
                })
            },

            //校验用户选中的答案
            checkAnswer: function (answer,current){
                let _this = this;
                let button_array = document.getElementsByClassName("result-button-item");
                let index = current - 1;
                //判断是否是多选，如果是多选，将数组转换成字符串
                if (_this.type === 'checkbox' && _this.answer.length > 0){
                   answer =_this.answer.join("");
                }
                if(_this.questionAnswer === answer){
                    button_array[index].style.backgroundColor = 'green';
                    //分数加一
                    _this.score++;
                }else {
                    button_array[index].style.backgroundColor = 'red';
                    _this.questionError(_this.questionId);
                }
                button_array[index].style.color = 'white';
                _this.answer = [];
            },

            //回答错误
            questionError: function (questionId){
                this.$http.get('/question/questionError',{params:{questionId:questionId}}).then(function (data){});
            }
        },
        mounted: function () {
            this.getNextQuestion(this.nextPage,this.next);
            this.getQuestionId();
        },
        //监听用户是否选择了答案
        watch: {
            answer(){
                let _this = this;
                if (_this.type === 'radio' && _this.answer != ''){
                    _this.checkAnswer(_this.answer,_this.current);
                }
            }
        }
    });
    layui.use('form', function(){
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.$;

        //监听提交
        form.on('submit(commit)', function(data){
            console.log(data);
            $.ajax({
                url: '/discuss/comment',
                method: 'post',
                data: {
                    comment:data.field.comment,
                },
                dataType: 'JSON',
                success: function (res){
                    if (res == 1){
                        layer.msg('评论成功！');
                    }
                    if (res == 2){
                        layer.open({
                            type: 0,
                            area: '300px',
                            moveOut: false,
                            closeBtn: false,
                            shade: 0.8,
                            btn: ['去登陆页面', '留在当前页面'],
                            btnAlign: 'c',
                            content: `<div style="width: 100%;text-align: center">
                                        <h2>您当前未登录！</h2>
                                      </div>`,
                            yes: function (){
                                window.location.href = "/page/learnerLogin";
                            }
                        })
                    }
                    if (res == 0){
                        layer.msg('评论失败！');
                    }
                }
            },JSON);

            return false;

        });
    });
</script>

